<script setup>
import MetaCode from "@/components/MetaCode.vue"
import Meta3Part from "@/components/Meta3Part.vue"
import {useClipboard, useDark, useToggle} from "@vueuse/core";
import {ElMessage} from "element-plus";
import data from '@/utils/data.js'
import {render} from "@/utils/tmpl.js";
import MetaIcon from "@/components/MetaIcon.vue";

// 渲染结果
const result = computed(() => {
  try {
    return render('art', data.tmpl[data.lang], JSON.parse(data.json))
  } catch (e) {
    return `json数据解析错误，${e}`
  }
})

// 主题切换
const isDark = useDark()
const toggleDark = useToggle(isDark)

// 复制结果
function copyResult(){
  useClipboard({legacy: true}).copy(result.value)
  ElMessage({message: '复制成功', type: 'success'})
}

</script>

<template>
  <meta3-part style="height: 100vh; overflow: hidden">
    <template v-slot:header>
      <MetaCode v-model:value="data.json" language="json"/>
      <div class="hint">数据</div>
    </template>

    <template v-slot:main>
      <MetaCode v-model:value="data.tmpl[data.lang]" :language="data.lang"/>
      <div class="hint">Art 模板</div>
      <div class="lang">
        <!-- 功能选择 -->
        <div>
          <el-select v-model="data.lang" style="width: 100px">
            <el-option v-for="(_, key) in data.tmpl" :value="key" :label="key" :key="key">
              <MetaIcon :name="key" :icon="key"/>
            </el-option>
            <template #label="{ value }">
              <MetaIcon :name="value" :icon="value"/>
            </template>
          </el-select>
        </div>
      </div>
    </template>

    <template v-slot:right>
      <MetaCode :value="result" readOnly :language="data.lang"/>
      <div class="hint">结果</div>
      <div class="btns">
        <el-tooltip content="复制结果" placement="right">
          <SvgIcon class="icon" name="copy" @click="copyResult"/>
        </el-tooltip>
        <el-tooltip content="切换主题" placement="right">
          <SvgIcon class="icon" name="theme" @click="toggleDark()"/>
        </el-tooltip>
      </div>
    </template>
  </meta3-part>
</template>

<style scoped lang="scss">
.lang {
  position: absolute;
  top: 10px;
  right: 10px;
}

.hint {
  position: absolute;
  bottom: 10px;
  right: 10px;

  font-size: 20px;
  color: var(--hint-color);
}

.btns {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 10px;
  background-color: var(--btns-backgroud-color);

  display: flex;
  flex-direction: column;
  font-size: 22px;

  color: var(--hint-color);

  .icon {
    cursor: pointer;
    position: relative;
    margin-top: 10px;

    &:hover {
      color: var(--drag-hover-color);
    }
  }
}

.codemirror-opacity {
  opacity: 0.8;
}
</style>